import React,{Suspense} from 'react'
import { routes } from './router'
import { BrowserRouter,Route,Routes,Navigate } from 'react-router-dom'
import Routerconfig from './type'

function App() {
  const routerRender = (route:Array<Routerconfig>)=>{
    return route && route.map((item,index)=>{
      return <Route 
      key={index}
      path={item.path}
      element={item.element ?<item.element/> : <Navigate to={item.to} />}
      >
        {item.children && routerRender(item.children)}
      </Route>
    })
  } 
  return (
  <Suspense fallback={<div>Loading...</div>}>
    <BrowserRouter>
      <Routes>
        {
          routerRender(routes)
        }
      </Routes>
    </BrowserRouter>
  </Suspense>
)
}


export default App
